@charset "UTF-8";

/*color*/
body { color: #444444; }
a{ color: #62a8ea; }
a:hover, a:active, a:focus { color: #1067d9; }
h1, h2, h3, h4, h5, h6 { color: #444444; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #1067d9; }
.page .text-primary { color: #62a8ea; }
.page .text-dark { color: #444444; }
.button-link{ color: #62a8ea; }
.button-link:hover, .button-link:active, .button-link:focus { color: #1067d9; }
.btn-primary:active:hover { background-color: #62a8ea; border-color: #62a8ea; }
.btn-info:hover { color: #ffffff; background-color:#1067d9; border-color:#1067d9;}


/*position*/
.breadcrumbs-custom{position:relative;background:#f8f8f8}
.breadcrumbs-custom__inner{padding:20px 0px 20px 0px;text-align:center}
.breadcrumbs-custom__inner>*+*{margin-top:10px}
.breadcrumbs-custom__title{color:#000;font-size:20px;line-height:1.2}
.breadcrumbs-custom__path{ line-height: 21px;}
.breadcrumbs-custom__path li{ height: 21px; line-height: 21px; padding:0px 2px; font-size: 14px; }
.breadcrumbs-custom__path li a{position:relative; font-size: 14px; height: 21px; line-height: 21px; }
.breadcrumbs-custom__path li a{display:inline;vertical-align:middle}
.breadcrumbs-custom__path li a,.breadcrumbs-custom__path li a:active,.breadcrumbs-custom__path li a:focus,.breadcrumbs-custom__path li a:hover{color:#000}
@media (min-width:768px){
  .breadcrumbs-custom__inner{display:-ms-flexbox;display:-webkit-flex;display:flex;margin-right:-15px;margin-left:-15px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
  .breadcrumbs-custom__inner>*{padding:0 15px}
  .breadcrumbs-custom__inner>*+*{margin-top:0}
  .breadcrumbs-custom__title{font-size:24px;line-height:1.54167}
}

/*subnavbar*/
.subnavlist{ font-size: 14px; padding-top:20px; display: none;}
.subnavlist ul{ padding: 0px 20px;}
.subnavlist ul li{ float:left; margin:10px;}
.subnavlist ul li a, .subnavlist ul li a:active, .subnavlist ul li a:focus { color: #444444; }
.subnavlist ul li a:hover, .subnavlist ul li a:focus { color: #62a8ea; }
.subnavlist ul li a.active{ color: #62a8ea; }
.subnavlist ul li .dropdown-menu a.active,.subnavlist ul li .dropdown-menu a:focus{ background-color: #f8f9fa; color: #62a8ea;}
.subnavlist .swiper-container{ height: 50px !important; min-height: 50px !important; width: 100%; overflow: visible;}
.subnavlist .swiper-container .swiper-wrapper{ height: 50px !important; margin: 0; padding: 0; justify-content: flex-start!important;}
.subnavlist .swiper-container .swiper-slide{ height: 50px !important; width: auto; margin: 0; padding:0px 15px;}
.subnavlist .swiper-container .swiper-slide a{ color: #444444;}
.subnavlist .swiper-container .swiper-slide a.active{ color: #62a8ea;}
.subnavlist .swiper-container .swiper-slide .dropdown-item.active{ background: #ececee; color: #62a8ea;}
.subnavlist .swiper-subnav .dropdown-item.active, .swiper-subnav .dropdown-item:active { color: #62a8ea; text-decoration: none; background-color: #ececee;}
.subnavlist .swiper-subnav .dropdown-menu.show{ margin-top:15px;}
.subnavlist .swiper-subnav .swiper-scrollbar{ background: rgba(0,0,0,.1); width: 92%; margin-left:4%; z-index: -1;}

/*page*/
.pagination{display:flex;padding-left:0;list-style:none;border-radius:0}
.page-link,.page-num{position:relative;display:block;padding:10px 15px;line-height:24px;color:#62a8ea;background-color:#fafafa; margin:3px;}
.page-link:hover,.page-num:hover{z-index:2;color:#fff;text-decoration:none;background-color:#62a8ea;border-color:#62a8ea}
.page-link:focus,.page-num:focus{z-index:2;outline:0;}
.page-link:not(:disabled):not(.disabled),.page-num:not(:disabled):not(.disabled){cursor:pointer}
.page-item:first-child .page-link{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.page-item:last-child .page-link{border-top-right-radius:0;border-bottom-right-radius:0}
.page-item.active .page-link{z-index:1;color:#ffffff;background-color:#62a8ea;border-color:#62a8ea}
.page-item.disabled .page-link{color:#ffffff;pointer-events:none;cursor:auto;background-color:#62a8ea;border-color:#62a8ea}
.page-num-current{ z-index:2;color:#fff;text-decoration:none;background-color:#62a8ea;border-color:#62a8ea}
.page-num{ padding: 10px 15px;}
.page-link.nohref:hover{ cursor: unset; background-color: #fafafa;}
@media (max-width:767px){
  .page-num{ display: none;}
}


/*newslist*/
.pages{ padding:30px 20px;}
.product-visit{ margin-left:15px;}
.newslist{background:#fff;padding:30px}
.newslist h4{margin:0px}
.newslist ul{padding:0px;list-style:none}
.newslist ul li{ padding:20px 0px; position: relative; margin-bottom: 15px;} 
.newslist ul li h4{font-weight:300}
.newslist ul li h4 a{color:#2a333c;text-decoration:none;font-size: 20px;color: #2a333c;}
.newslist ul li h4 a:hover{color:#444}
.newslist ul li h4 a:active,
.newslist ul li h4 a:focus,
.newslist ul li h4 a:hover{text-decoration:none}
.newslist ul li p{margin-bottom:10px;margin-top:5px;}
.newslist ul li p.des{color:#76838f;font-size:16px;font-weight:300;margin:10px 0;line-height: 24px; width: 95%;}
.newslist ul li p.info{color:#a3afb7;font-size:16px;font-weight:300}
.newslist ul li p.info i{color:#444}
.media-lg .media-object{width: 240px;}
.newslist ul li.media .media-left{ padding-right:20px;}
.newslist ul li:hover{box-shadow:0 0 60px -10px rgba(0,0,0,.1)}
.newslist ul li:hover:before{width:100%;opacity:1}
.newslist ul li:hover p.des,.newslist ul li:hover h4,.newslist ul li:hover p.info,.newslist ul li:hover .media-left{margin-left:20px; transition:all .30s ease;}
.newslist ul li p.des,.newslist ul li h4,.newslist ul li p.info,.newslist ul li .media-left{ transition:all .30s ease;}
.newslist ul li:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid #62a8ea;opacity:0}
@media (max-width:767px){
  .newslist{padding:10px;padding-top:20px}
  .newslist ul li{padding-bottom:20px;margin-bottom:20px}
  .newslist ul li h4{font-size:18px;margin-bottom:10px}
  .newslist ul li.media .media-left{padding-right:10px;display:table-cell}
  .newslist ul li.media p.des{display:none}
  .newslist ul li.media.media-lg .media-object{width:100px}
  .newslist ul li:hover p.des,.newslist ul li:hover h4,.newslist ul li:hover p.info,.newslist ul li:hover .media-left{ transition: none; margin-left:0px;}
}

/*shownews*/
.shownews{ padding:30px 20px;}
.shownews h2{ margin:0px;margin-bottom:5px;font-size:32px;line-height:1.5;font-weight:300;}
.shownews .product-date,.shownews .product-visit{ color:#a3afb7;font-size:16px;font-weight:300 margin-right:15px;}
.shownews .content{ padding-top:20px; font-size: 14px; color: #444; line-height: 24px;}
.shownews .turnpages{ display: block; width: 100%; height: auto; margin: 0 auto; text-align: center; overflow: hidden;}
.shownews .turnpages p{ border-radius: 5px; border: 1px solid #e4eaec; margin: 0px 0px 10px 0px; display: block;}
.shownews .turnpages p a{ padding:10px; display: block;}
.shownews .turnpages p.prev{ float: left; }
.shownews .turnpages p.next{ float: right; }
.shownews .turnpages p:hover{ background-color: #f3f7f9; color:#62a8ea;}
.shownews .recommend span.toptitle{ font-size: 24px; margin-bottom: 40px; margin-top: 15px; width: 100%; height: 40px; line-height: 40px; text-align: left; display: block; overflow: hidden;}
.shownews .recommend ul li.item_block{ width: 100%; height: auto; float: left; margin: 0px auto 5px auto; padding:20px 0px; border-bottom: 1px solid #dedede; display: block; overflow: hidden; position: relative;}
.shownews .recommend ul li.item_block a{ display:block}
.shownews .recommend ul li.item_block a .item_wrapper{ display:block}
.shownews .recommend ul li.item_block a p.item_date{ color: #999999; height: 30px; line-height: 30px; font-size: 16px; width: 50px; float: left;}
.shownews .recommend ul li.item_block a .item_info{ max-width: 200px; float: left; color: #444; font-size: 16px; padding-left: 10px; margin: 0; height: 30px; line-height: 30px;}
.ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block;}
.shownews .recommend ul li.item_block a .item_des{ width:260px; height: 70px; font-size: 12px; line-height: 24px; text-align: left; color: #999999; padding-top:10px; clear: both;}
.shownews .recommend ul li.item_block a:hover p.item_date span,.shownews .recommend ul li.item_block a:hover .item_info{ color: #62a8ea;}
.shownews .recommend ul li.item_block:hover{box-shadow:0 0 60px -10px rgba(0,0,0,.1)}
.shownews .recommend ul li.item_block:hover:before{width:100%;opacity:1}
.shownews .recommend ul li.item_block:hover .item_wrapper{margin-left:20px; transition:all .30s ease;}
.shownews .recommend ul li.item_block:hover .item_des{padding-left:5px; transition:all .30s ease;}
.shownews .recommend ul li.item_block:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid #62a8ea;opacity:0}
.shownews .recommend ul li.item_block,.shownews .recommend ul li.item_block .item_wrapper,.shownews .recommend ul li.item_block .item_des{ transition:all .30s ease;}


/*productlist*/
.productparams{ margin-bottom: 3.5rem;}
.productlist .card{ position: relative; margin-bottom: 25px;}
.productlist .card .card-img{ overflow: hidden;}
.productlist .card .card-img img{ transition:all .30s ease;}
.productlist .card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.1);}
.productlist .card .card-img img:hover{ transform: scale(1.1); transition:all .30s ease;}
.productlist .card .card-body{ padding: 0.5rem 0.5rem 0.5rem 0.5rem !important; }
.productlist .card .card-body .card-title a{ font-size: 16px; font-weight: normal; color: #444444; text-align: center; }
.productlist .card:hover:before{width:100%;opacity:1}
.productlist .card:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid #62a8ea;opacity:0}

/*showproduct*/
.showproduct{ padding:30px 20px; margin-bottom: 60px;}
.showproduct .product-title{ padding-bottom:20px; font-size: 24px;}
.showproduct .product-date,.showproduct .product-visit{ font-size: 16px; color: #444444; margin-right:15px;}
.showproduct .turnpages{ display: block; width: 100%; height: auto; margin: 0 auto; text-align: center; overflow: hidden;}
.showproduct .turnpages p{ border-radius: 5px; border: 1px solid #e4eaec; margin: 0px 0px 10px 0px; display: block;}
.showproduct .turnpages p a{ padding:10px; display: block;}
.showproduct .turnpages p.prev{ float: left; }
.showproduct .turnpages p.next{ float: right; }
.showproduct .turnpages p:hover{ background-color: #f3f7f9; color:#62a8ea;}
.showproduct .tabs-custom.swiper-container{ height: 60px !important; min-height: 60px !important; width: 100%; overflow: visible;}
.showproduct .tabs-custom .nav{ display: flex !important; flex-wrap: nowrap; padding:0; border-bottom: 1px solid #ececee;}
.showproduct .tabs-custom .nav-item{ height: 60px !important; width: auto; margin: 0; line-height: 60px;}
.showproduct .tabs-custom .nav-item a{ display: block; overflow:hidden; height: 60px; padding:0px 25px; line-height: 60px;}
.showproduct .tabs-custom .nav-item a.active{ border-bottom: 2px solid #62a8ea;}
.showproduct .tab-content{ padding: 30px;}
@media (max-width:767px){
  .showproduct .tab-content{ padding: 30px 0px;}
}
@media (max-width:767px){
  .leftrecommend,.rightrecommend{ display: none;}
}
.showproduct .recommend span.toptitle{ font-size: 24px; margin-bottom: 40px; margin-top: 15px; width: 100%; height: 40px; line-height: 40px; text-align: left; display: block; overflow: hidden;}
.showproduct .recommend ul li.item_block{ width: 100%; height: auto; float: left; margin: 0px auto 5px auto; padding:20px 0px; border-bottom: 1px solid #dedede; display: block; overflow: hidden; position: relative;}
.showproduct .recommend ul li.item_block a{ display:block}
.showproduct .recommend ul li.item_block a .item_wrapper{ display:block}
.showproduct .recommend ul li.item_block a p.item_date{ color: #999999; height: 30px; line-height: 30px; font-size: 16px; width: 50px; float: left;}
.showproduct .recommend ul li.item_block a .item_info{ max-width: 200px; float: left; color: #444; font-size: 16px; padding-left: 10px; margin: 0; height: 30px; line-height: 30px;}
.ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block;}
.showproduct .recommend ul li.item_block a .item_des{ width:260px; height: 70px; font-size: 12px; line-height: 24px; text-align: left; color: #999999; padding-top:10px; clear: both;}
.showproduct .recommend ul li.item_block a:hover p.item_date span,.showproduct .recommend ul li.item_block a:hover .item_info{ color: #62a8ea;}
.showproduct .recommend ul li.item_block:hover{box-shadow:0 0 60px -10px rgba(0,0,0,.1)}
.showproduct .recommend ul li.item_block:hover:before{width:100%;opacity:1}
.showproduct .recommend ul li.item_block:hover .item_wrapper{margin-left:20px; transition:all .30s ease;}
.showproduct .recommend ul li.item_block:hover .item_des{padding-left:5px; transition:all .30s ease;}
.showproduct .recommend ul li.item_block:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid #62a8ea;opacity:0}
.showproduct .recommend ul li.item_block,.showproduct .recommend ul li.item_block .item_wrapper,.showproduct .recommend ul li.item_block .item_des{ transition:all .30s ease;}
.showproduct .recommend ul li.item_block a .item_img{ max-width: 300px; float: left; margin: 0; }
.showproduct .recommend ul li.item_block a .item_img img{ width: 300px; height: 300px; display: block;}
.showproduct .recommend ul li.item_block a .item_link{ width:300px; height: 30px; font-size: 12px; line-height: 30px; text-align: left; color: #999999; padding-top:10px; clear: both;}
.showproduct .recommend ul li.item_block a .item_link p{ font-size: 16px; text-align: center; line-height: 30px; color: #444444;}

/*caselist*/
.caselist .card{ position: relative; margin-bottom: 25px;}
.caselist .card .card-img{ overflow: hidden;}
.caselist .card .card-img img{ transition:all .30s ease;}
.caselist .card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.1);}
.caselist .card .card-img img:hover{ transform: scale(1.1); transition:all .30s ease;}
.caselist .card .card-body{ padding: 0.5rem 0.5rem 0.5rem 0.5rem !important; }
.caselist .card .card-body .card-title a{ font-size: 16px; font-weight: normal; color: #444444; text-align: center; }
.caselist .card:hover:before{width:100%;opacity:1}
.caselist .card:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid #62a8ea;opacity:0}

/*showcase*/
.showcase{ padding:30px 20px; margin-bottom: 60px;}
.showcase .product-date,.showproduct .product-visit{ font-size: 16px; color: #444444; margin-right:15px;}
.showcase .turnpages{ display: block; width: 100%; height: auto; margin: 0 auto; text-align: center; overflow: hidden;}
.showcase .turnpages p{ border-radius: 5px; border: 1px solid #e4eaec; margin: 0px 0px 10px 0px; display: block;}
.showcase .turnpages p a{ padding:10px; display: block;}
.showcase .turnpages p.prev{ float: left; }
.showcase .turnpages p.next{ float: right; }
.showcase .turnpages p:hover{ background-color: #f3f7f9; color:#62a8ea;}
.showcase .tabs-custom.swiper-container{ height: 60px !important; min-height: 60px !important; width: 100%; overflow: visible;}
.showcase .tabs-custom .nav{ display: flex !important; flex-wrap: nowrap; padding:0; border-bottom: 1px solid #ececee;}
.showcase .tabs-custom .nav-item{ height: 60px !important; width: auto; margin: 0; line-height: 60px;}
.showcase .tabs-custom .nav-item a{ display: block; overflow:hidden; height: 60px; padding:0px 25px; line-height: 60px;}
.showcase .tabs-custom .nav-item a.active{ border-bottom: 2px solid #62a8ea;}
.showcase .tab-content{ padding: 30px;}
@media (max-width:767px){
  .showcase .tab-content{ padding: 30px 0px;}
}

/*searchlist*/
.form-control{ border-radius: 0 !important;}
.searchcomponent{ width: 100%; margin-bottom: 3.5rem;}
.searchcomponent .form-group{ width: 85%; float: left; margin: 0 !important;}
.searchcomponent .form-group input{ width: 100%;}
.searchcomponent button{ width: 15%; float: right; margin: 0 !important;}
.searchlist .card-body{ border-bottom: 1px solid #ececee;}
.searchlist .search-link{ margin-top: 15px;}

/*form*/
.messagelist select{ height: 34px; padding:0.375rem 0.75rem; border: 1px solid #ced4da; border-radius: 0.25rem;}

/*joblist*/
.joblist ul li{ border-bottom: 1px solid #dedede; margin-bottom: 70px; position: relative;}
.joblist ul li h4 span{ font-size: 20px; padding-bottom: 10px;}
.joblist ul li .des{ color: #686868 !important; padding-top:25px;}
.joblist ul li:hover{ transition:all .30s ease; box-shadow:0 8px 20px rgba(0,0,0,.1);}
.joblist ul li h4 span,.joblist ul li .des,.joblist ul li span.subtitle{ transition:all .30s ease;}
.joblist ul li:hover h4 span,.joblist ul li:hover .des,.joblist ul li:hover span.subtitle{ margin-left:25px; transition:all .30s ease;}
.joblist ul li:hover:before{width:100%;opacity:1}
.joblist ul li:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:0px;width:40%;border:1px solid #62a8ea;opacity:0}

/*downloadlist*/
.downloadlist ul li{ margin-bottom: 30px; position: relative;}
.downloadlist ul li p.info{color:#a3afb7;font-size:16px;font-weight:300}
.downloadlist .downloadtitle{ font-size: 20px; height: 42px; line-height: 42px;}
.downloadlist .downloadbtn{ float: right; background: #ffffff; border: 1px solid #62a8ea; color: #62a8ea; font-weight: normal; margin-top: 7px;}
.downloadlist .downloadbtn:hover{ background-color: #1067d9; color:#ffffff; border: 1px solid #1067d9;}
.downloadlist p.info{ margin-top:15px;}
.downloadlist ul li:hover{ transition:all .30s ease; box-shadow:0 8px 20px rgba(0,0,0,.1);}
.downloadlist ul li .downloadtitle,.downloadlist ul li p.info,.downloadlist ul li .downloadbtn{ transition:all .30s ease;}
.downloadlist ul li:hover .downloadtitle,.downloadlist ul li:hover p.info{ margin-left:15px; transition:all .30s ease;}
.downloadlist ul li:hover .downloadbtn{ margin-right: 15px; margin-top: 15px; transition:all .30s ease;}
.downloadlist ul li:hover:before{width:100%;opacity:1}
.downloadlist ul li:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:0px;width:40%;border:1px solid #62a8ea;opacity:0}

/*botmenu*/
.botmenu{ text-align: center !important; background: #62a8ea;}
.botmenu a{ margin: 0; padding: 0;}

/*online*/
.online{position:fixed;bottom:300px;right:10px;width:60px;z-index:999;color:#999}
.online i,.botmenu i{ font-style: normal !important;}
.online a{color:#666}
.online a:hover{text-decoration:none}
.online dl{background:#27a8e1;padding:10px 5px;margin-bottom:1px;position:relative}
.online dl dd{color:#fff;text-align:center;font-size:12px;cursor:pointer}
.online dl dd i{font-size:25px}
.online dl:hover{background:#62a8ea}
.online dl dt{position:absolute;top:0;right:60px;background:#fff;border:1px solid #ccc;z-index:9999;display:none;padding:10px 15px;font-weight:400}
.online dl dt h3{display:block;font-size:16px;color:#666;border-bottom:1px solid #ccc;padding-bottom:5px}
.online dl dt h3 i{margin-right:5px}
.online dl dt h3 span{float:right;cursor:pointer}
.online dl dt input{border:1px solid #ccc;border-radius:5px;margin-top:15px;height:40px;line-height:40px;padding:3px 5px;width:100%}
.online dl dt button{margin:10px 0;border:none;border-radius:5px;width:100%;font-size:18px;height:40px;line-height:40px;background:#62a8ea;color:#fff;cursor:pointer}